<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="fragment" content="!">
  <link rel="stylesheet" href="app/css/bootstrap.css">
  <link rel="stylesheet" href="app/css/responsive.css">
  <link rel="stylesheet" href="app/css/app.css">
    
  <title>Bootstrap Magic : Twitter bootstrap themes generator</title>
  <meta name="description" content="Simple and fast Twitter bootstrap themes generator made with AngularJS. Design your own bootstrap theme, like it ? Download less or css on the go." />
  <link itemprop="SoftwareApplicationCategory" href="http://schema.org/SoftwareApplication"/>
  <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-37710723-1']);
      _gaq.push(['_trackPageview']);
   
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
     
  </script>
  
</head>
<body data-ng-cloak>
	<div class="protected">
        <div class=" navbar navbar-static-top navbar-inverse" id="menuTop">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="index.html" title="Bootrstrap Magic written in AngularJS">Bootstrap Magic</a>
                        <ul class="nav">
                            <li><a href="index.html" title="bootstrap themes generator presentation">Intro</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="app/index.html" title="bootstrap themes generator">Editor</a></li>
                            <li class="divider-vertical"></li>
                        </ul>
                </div>
            </div>
        </div>
	</div>
	
	<div class="container">
	<div class="protected" itemscope itemtype="http://schema.org/SoftwareApplication">
	        <div class="protectedIntroBody">
	            <section class="row">
		            <div class="span12">	
		                <div class="introHeader">
			                <div class="alert alert-success">
		                		Ruby on Rails and JS Framework champion ? 
		                		Want to develop Awesome WebApp ? Join us at <a href="http://www.pikock.com/en/recruitment.html" title="Pikock create your website easily">Pikock</a> in Paris, France. We are <a href="http://www.pikock.com/en/recruitment.html" title="Pikock Recruitment">hiring !</a>
		                	</div>
		                    <h1><span itemprop="name">Bootstrap Magic </span><small>made with AngularJS</small></h1>
		                        <p class="lead"><span itemprop="description">Create simply your own <a href="http://twitter.github.com/bootstrap/index.html" title="Twitter Bootstrap themes generator">Twitter Bootstrap</a> theme.</span> Like it ? Save it !</p>
		                        <p class="buttonsBlocks">
		                            <a class="btn btn-primary btn-large" href="app/index.html" title="try bootstrap themes generator angularjs">
		                              <span class="apico games-white apico-brush"></span>Create your theme
		                            </a>
		                            <span class="github"><a href="https://github.com/pikock/bootstrap-magic" title="angular js bootstrap themes generator">GitHub project</a></span>
		                        </p>
		                </div>
		            </div>
	       	 	</section>
	
		        <section class="row">
		            <div class="span12">
		                <h2 class="centerTitle">What's great ? </h2>
		            
		                <section class="row">
		                    <div class="span4">
		                        <h3><span class="apico games apico-eye-open"></span>Contextual and live preview</h3>
		                        <p>See instantly what you are changing on the content.</p>
		                    </div>
		                    
		                    <div class="span4">
		                        <h3><span class="apico interface apico-magic-wand"></span>Magic Typeahead </h3>
		                        <p>Awesome typehead function included :<b> Find variables as you type.</b></p>
		                    </div>
		                    
		                    <div class="span4">
		                        <h3><span class="apico games apico-brush"></span>Colorpicker</h3>
		                        <p>Got the color that you love with <a href="http://www.eyecon.ro/bootstrap-colorpicker/" title="colorpicker bootstrap">Colorpicker.</a></p>
		                    </div>
		                </section>
		            
		                <section class="row">
		                    
		                    <div class="span4">
		                        <h3><span class="apico games apico-cloud-upload"></span>Import your variables</h3>
		                        <p>You already have set some variables. Import them and you can even custom your own new variables.</p>
		                    </div>
		                    
		                   	<div class="span4">
		                   	     <h3><span class="apico media apico-doc-out"></span>Download</h3>
		                   	     <p>Satisfy? Download your personalized CSS, minified or not and LESS variables.</p>
		                   	 </div>
		                   	
		                   	<div class="span4">
	                   	     <h3><span class="apico games apico-circle-plus"></span>Less included</h3>
	                   	     <p>You like <a href="http://lesscss.org/" title="Less css">Less </a>? Bootstrap theme editor support lovely Less language with all the functions. Use all <b>the functions less that you love.</b></p>
		                   	 </div>
		                   	
		                </section>	
		            	
		            	<section class="row">
		            	    
		            	    <div class="span4 offset4">
		            	        <h3><span class="apico games apico-atoms"></span>AngularJS Project</h3>
		            	        <p><a href="http://angularjs.org/" title="angular js framework">Awesome framework</a> for an awesome project. Check out our <a href="https://github.com/pikock/bootstrap-magic" title="angular js bootstrap theme editor">GitHub project.</a></p>
		            	    </div>   
		            	</section>
		            	
		            	
		                <div class="buttonsDiv">
		                    <p class="buttonsBlocks">
		                        <a class="btn btn-primary btn-large" href="app/index.html" title="try bootstrap theme generator angularjs">
		                          <span class="apico games-white apico-brush"></span>Create your theme
		                        </a>
		                        <span class="github"><a href="https://github.com/pikock/bootstrap-magic" title="angular js bootstrap theme editor">GitHub project</a></span>
		                    </p>
		                </div>
		            </div>
		        </section>
		        
		         <section class="row">
		            <div class="span12">
		                <h2 class="centerTitle">They talked about it.</h2>

		                <section class="row">
		                    <div class="span4">
								<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic - another easy way to theme and set your Bootstrap-powered site apart. <a href="http://t.co/bLB6kvR1" title="http://pikock.github.com/bootstrap-magic/index.html">pikock.github.com/bootstrap-magi…</a></p>&mdash; Brian Ford (@briantford) <a href="https://twitter.com/briantford/status/291608969963782145" data-datetime="2013-01-16T18:12:50+00:00">Janvier 16, 2013</a></blockquote>
								
								<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic – A Twitter Bootstrap themes generator <a href="http://t.co/sOTUKTM5" title="http://ow.ly/gV0T2">ow.ly/gV0T2</a></p>&mdash; Paul Andrew (@speckyboy) <a href="https://twitter.com/speckyboy/status/292210993117941762">Janvier 18, 2013</a></blockquote>
		                    </div>

		                   	<div class="span4">
		                        <blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic – Personnalisez vos templates Twitter Bootstrap en quelques clics <a href="http://t.co/cj0vRiiJ" title="http://goo.gl/fb/Vp76B">goo.gl/fb/Vp76B</a> <a href="https://twitter.com/search/%23blog">#blog</a></p>&mdash; Korben (@Korben) <a href="https://twitter.com/Korben/status/291541713510621184" data-datetime="2013-01-16T13:45:35+00:00">Janvier 16, 2013</a></blockquote>
		                        <blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic : Twitter bootstrap themes generator <a href="http://t.co/b98IA6Po" title="http://pikock.github.com/bootstrap-magic/index.html">pikock.github.com/bootstrap-magi…</a></p>&mdash; Daniel Stefanovic (@DaniStefanovic) <a href="https://twitter.com/DaniStefanovic/status/294008080335765504">Janvier 23, 2013</a></blockquote>
		                    </div>

		                    <div class="span4">
		                        <blockquote class="twitter-tweet" lang="fr"><p>A very nice bootstrap colorizer Bootstrap Magic ( <a href="http://t.co/shM41gDN" title="http://pikock.github.com/bootstrap-magic/">pikock.github.com/bootstrap-magi…</a>) has been added to Bootsnipp Resources page: <a href="http://t.co/AU6X8m6a" title="http://bootsnipp.com/resources">bootsnipp.com/resources</a></p>&mdash; Maksim Surguy (@msurguy) <a href="https://twitter.com/msurguy/status/291376991666577408" data-datetime="2013-01-16T02:51:02+00:00">Janvier 16, 2013</a></blockquote>
		                        
		                        <blockquote class="twitter-tweet" lang="fr"><p>"Twitter Bootstrapのテーマをオンラインで作成出来るツール・Bootstrap magic" <a href="http://t.co/1hldyT9x" title="http://feedly.com/k/VSsSJI">feedly.com/k/VSsSJI</a></p>&mdash; kazukichi_0914 (@kazukichi_0914) <a href="https://twitter.com/kazukichi_0914/status/292920499900674048">Janvier 20, 2013</a></blockquote>
		                        
		                    </div>   
		                </section>	

		            </div>
		        </section>
	    	</div>
		</div>
	</div>
    
	<footer class="protected">
		<div class="footer">
			<div class="container">
				<div class="span12 ">
					<p class="pull-left">Code licensed under <a href="http://opensource.org/licenses/MIT" title="MIT licence">MIT licence</a></p>
					<p class="pull-right">Handmade by <span itemprop="author" itemscope itemtype="http://schema.org/Organization"><a itemprop="url" href="http://www.pikock.com" title="create your website easily"><span itemprop="name">Pikock<span></a> </span>x <a href="http://www.autreplanete.com/" title="web agency paris">Autre planète</a> in Paris.</p>
				</div>
			</div>
		</div>
	</footer>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
	
</body>
</html>
